<template>
	<div class="citylist">
		<div class="xbox2">
			<p>定位/附件城市</p>
			<p>{{show}}</p>
		</div>
		<p class="p1">热门城市</p>
		<div class="xbox3">
			<ul>
				<li v-for="item in hotCities" :key="item.code" @click="toHome(item.name)" :class="{'default' : show==item.name}">{{item.name}}</li>

			</ul>
		</div>
		<div class="xbox4">
			<article v-for="(item , index) in cityList" :key="index">
			<p>字母{{item.initial}}开头的城市</p>
		<ul>
			<li v-for="key in item.list" :key="key.code" @click="toHome(key.name)" :class="{'default' : show==key.name}">{{key.name}}</li>
		</ul>
			</article>
		</div>
	</div>
</template>

<script>
	//引入State的辅助函数
	import{mapMutations , mapState} from 'vuex'
	
	export default{
		name:'Citylist',
		data() {
			return{
				hotCities:[],
				cityList:[],
				show:'广州'
			}
		},
		mounted() {
			if(localStorage.city ){
				this.show = localStorage.city;
			}
		},
		methods:{
			toHome(cname){
				//调用并传参被选中的城市进行传递
				this.changeCity(cname)
				//当点击某个城市时，获取传递过来的城市名称
				// this.show = this.cityName;
				//返回首页
				this.$router.push('/')
			},
			//激活mutations的方法
			...mapMutations(['changeCity'])
		},
		created() {
			let that = this;
			this.axios.get('./api/city.json').then( (res)=> {
				let data = res.data.data;
				that.hotCities = data.hotCities;
				that.cityList = data.city
			})
		}
	}
</script>

<style scoped>
	.xbox3 ul li.default
	{
		background-color: #fed101;
		color: white;
	}
	.xbox4 ul li.default
	{
		background-color: #fed101;
		color: white;
	}
	.xbox2{
		width: 100%;
		height: 2rem;
	}
	.xbox2 p:first-child{
		font-size: 0.45rem;
		padding-top: 0.3rem;
		color: #7c7c7c;
		text-indent: 0.27rem;
	}
	.xbox2 p:last-child{
		width: 15%;
		height: 0.85rem;
		text-align: center;
		line-height: 0.85rem;
		border-radius: 0.25rem;
		font-size: 0.35rem;
		margin-top: 0.3rem;
		margin-left: 0.5rem;
		background-color: #e6e6e6;
		color: #7c7c7c;
	}
	.p1{
		font-size: 0.45rem;
		padding-top: 0.3rem;
		color: #7c7c7c;
		text-indent: 0.27rem;
	}
	.xbox3 ul{
		width: 94%;
		height: 3rem;
		margin: 0.5rem auto 0.3rem;
		border-bottom: 1px solid violet;
	}
	.xbox3 ul li,.xbox4 ul li{
		width: 15%;
		margin-right: 0.14rem;
		margin-bottom: 0.4rem;
		float: left;
		height: 0.85rem;
		font-size: 0.32rem;
		text-align: center;
		line-height: 0.85rem;
		border-radius: 0.25rem;
		background-color: #e6e6e6;
		color: #7c7c7c;
	}
	.xbox4{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	.xbox4 p:first-child{
		font-size: 0.45rem;
		padding-top: 0.3rem;
		color: #7c7c7c;
		text-indent: 0.27rem;
	}
	.xbox4 ul{
		width: 94%;
		overflow: hidden;
		margin: 0.5rem auto 0.3rem;
		border-bottom: 1px solid violet;
	}

</style>
